<template>
	<view class="create-feedback">
		<view class="create-item">
			<text class="info-item-title">手机号码</text>
			<input class="info-item-input" type="text" placeholder-class="placeholderFontClass" maxlength="11"
				placeholder="请输入手机号码" v-model="phone">
		</view>
		<!-- 问题描述 -->
		<view class="detail-tally-trace">
			<view class="detail-trace-title">问题描述</view>
			<view class="detail-remark">
				<uni-easyinput type="textarea" :trim="true" :inputBorder="false" v-model="remark"
					placeholder="请输入问题描述" />
			</view>
		</view>
		<!-- 反馈照片 -->
		<view class="detail-tally-trace">
			<view class="detail-trace-title">图片</view>
			<view class="detail-tally-imgs">
				<view class="grid-item-box" v-for="(item, index) in imgs" :key="index"
					@tap.stop="ViewImage(item.imgName)">
					<image :src="item.imgName" class="tally-img" mode="aspectFill" />
					<van-icon class="delete-icon" name="clear" @tap.stop="DelImg(index)" />
				</view>
				<view class="grid-item-box detail-tally-img-add" @tap.stop="ChooseImage">
					<van-icon class="add-icon" name="plus" />
				</view>
			</view>
		</view>

		<button class="submit-btn" @click.stop.prevent="handleSubmit">确认提交</button>
		<view class="history-feedback">
			<text class="history-feedback-text" @click="handleHistoryFeedback">查看反馈记录</text>
		</view>
	</view>
</template>

<script>
	import apiRqs from "@/api/api-request.js";
	export default {
		data() {
			return {
				phone: '',
				remark: '',
				imgs: [],
			}
		},
		methods: {
			// 上传图片
			ChooseImage(index) {
				let imgs = this.imgs;
				let loginInfo = uni.getStorageSync("loginInfo");
				var that = this;
				uni.chooseImage({
					count: 6, //默认最多上传6张图片
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						// 将上传的图片分别请求上传到服务器
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: getApp().globalData.websiteUrl + "/api/v1/FileUpload",
								filePath: tempFilePaths[i],
								name: 'file',
								header: {
									'Authorization': ('Bearer ' + loginInfo.token) || ''
								},
								formData: {
									'fileType': 'CheckImg'
								},
								success: (uploadFileRes) => {

									let res = JSON.parse(uploadFileRes.data);
									let filePath = res.data[0].filePath;
									let newFilePath = filePath.replace(/\\/g, "/");
									console.log('newFilePath', newFilePath);
									let d = {
										imgName: `${getApp().globalData.websiteUrl}${newFilePath}/${res.data[0].fileName}`
									}
									imgs.push(d);
								}
							});
						}
						that.imgs = imgs;
					}
				});
			},
			// 预览图片
			ViewImage(imgName) {
				console.log('点击了预览');
				let imgs = this.imgs;
				var dataArray = [];
				for (var i = 0; i < imgs.length; i++) {
					dataArray[i] = imgs[i].imgName;
				}
				uni.previewImage({
					urls: dataArray,
					current: imgName
				});
			},
			// 删除图片
			DelImg(index) {
				this.imgs.splice(index, 1);
			},
			handleSubmit() {
				if (this.phone.trim() == "") {
					getApp().showToast("手机号码不能为空");
				} else if (this.remark.trim() == "") {
					getApp().showToast("问题描述不能为空");
				} else {
					getApp().showLoading();
					let rqs = {
						"adviceId": "0",
						"detail": this.remark,
						"tel": this.phone,
						"img": this.imgs
					};
					var that = this;
					apiRqs._submitFeedback(rqs).then((res) => {
						uni.hideLoading();
						console.log('提交结果', res);
						if (res.code == 200) {
							getApp().showToast("提交成功", "success");
							setTimeout(() => {
								uni.navigateBack();
							}, 1500)
						}
					}).catch((err) => {
						console.log('err', err);
					})
				}

			},
			handleHistoryFeedback() {
				uni.navigateTo({
					url: '/packageC/my/history-feedback'
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.create-feedback {
		.history-feedback {
			display: flex;
			justify-content: center;

			.history-feedback-text {
				margin: 10px;
				font-size: 13px;
				color: #008aff;
				font-weight: 500;
			}
		}

		.create-item {
			display: flex;
			align-items: center;
			width: calc(100% - 40px);
			height: 48px;
			line-height: 48px;
			border-bottom: 1px solid #f5f5f5;
			background-color: #fff;
			padding: 0 15px;
			box-sizing: border-box;
			margin: 15px 20px;
			border-radius: 4px;

			&:first-child {
				border-top: 1px solid #f5f5f5;
			}

			.info-item-title {
				width: 80px;
				flex: 0 0 80px;
				font-size: 14px;
			}

			.info-item-input {
				flex: 1;
				font-size: 14px;
				text-align: left;
				color: #666666;
			}

			.placeholderFontClass {
				color: #ddd;
			}
		}

		.detail-tally-trace {
			margin: 15px 20px;
			.detail-trace-title {
				font-size: 12px;
				color: #999999;
				margin-left: 16px;
			}

			.detail-tally-imgs {
				background-color: #fff;
				margin-top: 10px;
				padding: 0px 15px 15px 15px;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				border-radius: 4px;

				.grid-item-box {
					width: 100px;
					height: 100px;
					position: relative;
					margin-left: 15px;
					margin-top: 15px;

					&:nth-child(3n+1) {
						margin-left: 0;
					}

					.tally-img {
						width: 100%;
						height: 100%;
					}

					.delete-icon {
						position: absolute;
						top: -10px;
						right: -10px;
						color: #FF1010;
						background-color: #fff;
						font-size: 22px;
						border-radius: 50%;
						z-index: 99;
					}

					&.detail-tally-img-add {
						text-align: center;
						line-height: 100px;
						border: 1px solid #efefef;
						box-sizing: border-box;

						.add-icon {
							font-size: 28px;
							color: #999999;
						}
					}
				}
			}

			.detail-remark {
				margin-top: 10px;
				background-color: #fff;
				padding: 10px 16px;
				box-sizing: border-box;
				border-radius: 4px;
			}
		}

		.submit-btn {
			margin: 20px 20px 10px 20px;
			border: none;
			background-color: #008aff;
			color: #fff;
			font-size: 15px;
			height: 35pt;
			line-height: 35pt;

			&:active {
				background-color: #0076DB;
			}
		}
	}
</style>
